<template>
  <div class="mod-marketing-coupon">
    <div class="business-info-mod-wrap" >
      <div class="business-info-mod">
        <el-form label-width="140px" :model="shopInfo"
                 size="small">
          <div class="ci-wrapper">
            <div class="left-info">
              <el-button type="primary" style="text-align: center;" v-if="!aliDetailInfoForm"  @click="openAliRegister()">注册支付宝二级商户</el-button>

              <el-form v-if="aliDetailInfoForm" ref="companyInfoForm" :model="aliDetailInfoForm" label-width="140px"
                       size="small">
                <el-form-item label="二级商户编号:" prop="externalId" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span >{{ aliDetailInfoForm.externalId }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="二级商户名称:" prop="name" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.name }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="营业执照号:" prop="certNo" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.certNo }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="法人名称:" prop="legalName" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.legalName }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="法人身份证号:" prop="legalCertNo" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.legalCertNo }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="商户支付宝账号:" prop="alipayLogonId" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.alipayLogonId }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="联系人名称:" prop="contactInfosName" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.contactInfosName }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="联系人电话:" prop="contactInfosMobile" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.contactInfosMobile }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="二级商户状态:" prop="status" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span v-if = "aliDetailInfoForm.status === '99'">审核成功 </span>
                      <span v-if = "aliDetailInfoForm.status === '-1'">审核失败 </span>
                      <span v-if = "aliDetailInfoForm.status === '031'">审核中 </span>
                      <span v-if = "aliDetailInfoForm.status === '1'">风控审核已创建待审批 </span>
                      <span v-if = "aliDetailInfoForm.status === '2'">风控审核通过 </span>
                      <span v-if = "aliDetailInfoForm.status === '3'">客资审核已创建待审批 </span>
                      <span v-if = "aliDetailInfoForm.status === '4'">客资审核通过 </span>
                      <span v-if = "aliDetailInfoForm.status === '5'">已发起二级商户确认 </span>
                      <span v-if = "aliDetailInfoForm.status === '6'">签约完成 </span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="用户协议确认二维码链接:" prop="subSignQrCodeUrl" v-if = "aliDetailInfoForm.status === '4'">
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.subSignQrCodeUrl }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="原因:" prop="reason">
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.reason }}</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="审核备注:" prop="memo" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.memo }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="申请时间:" prop="createTime" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.createTime }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="修改时间:" prop="updateTime" v-if="aliDetailInfoForm.updateTime" >
                  <div class="business-license-box">
                    <div class="license-content">
                      <span>{{ aliDetailInfoForm.updateTime }}</span>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
              <el-button type="primary" style="text-align: center;margin-left: 200px" v-if = "aliDetailInfoForm && (aliDetailInfoForm.status === '99' || aliDetailInfoForm.status === '-1')"  @click="openModifyAliInfo()">修改 </el-button>
            </div>
          </div>
        </el-form>


      </div>
    </div>


    <el-dialog
      :title="aliTitel"
      :visible.sync="dialogAliVisible"
      :before-close="handleAliClose"
      :loading="saveCustomerInfoLoading"
    >
      <el-form :model="addAliInfoForm" ref="addAliInfoForm" label-width="120px">
        <el-form-item label="二级商户名称:" prop="name" >
          <el-input v-model="addAliInfoForm.name" placeholder="营业执照全称" />
        </el-form-item>
        <el-form-item label="营业执照号:" prop="certNo" >
          <el-input v-model="addAliInfoForm.certNo" placeholder="三证合一号码" />
        </el-form-item>
        <el-form-item label="法人名称:" prop="legalName" >
          <el-input v-model="addAliInfoForm.legalName"  />
        </el-form-item>
        <el-form-item label="法人身份证号:" prop="legalCertNo" >
          <el-input v-model="addAliInfoForm.legalCertNo"  />
        </el-form-item>
        <el-form-item label="商户支付宝账号:" prop="alipayLogonId" >
          <el-input v-model="addAliInfoForm.alipayLogonId" placeholder="绑定商户和结算" />
        </el-form-item>
        <el-form-item label="商户联系人:" prop="contactInfosName" >
          <el-input v-model="addAliInfoForm.contactInfosName"  />
        </el-form-item>
        <el-form-item label="商户联系人电话:" prop="contactInfosMobile" >
          <el-input v-model="addAliInfoForm.contactInfosMobile"  />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          size="mini"
          plain
          round
          @click="handleAliClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          plain
          round
          @click="saveCustomerInfo()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      aliDetailInfoForm: {},
      saveCustomerInfoLoading: false,
      dialogAliVisible: false,
      addAliInfoForm: {},
      aliTitel: ''
    }
  },
  created () {
    this.getShopAliInfo()
  },
  methods: {
    openAliRegister () {
      this.aliTitel = '二级商户添加'
      this.addAliInfoForm = {}
      this.dialogAliVisible = true
    },
    openModifyAliInfo () {
      this.aliTitel = '二级商户修改',
        this.addAliInfoForm = this.aliDetailInfoForm,
        this.dialogAliVisible = true
    },
    handleAliClose () {
      this.dialogAliVisible = false
    },
    getShopAliInfo () {
      this.$http({
        url: this.$http.adornUrl(`/platform/shopDetail/getShopAliMerchantApplyByShopId`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.aliDetailInfoForm = data
      })
    },
    saveCustomerInfo () {
      this.saveCustomerInfoLoading = true
      let url
      if (this.aliTitel == '二级商户添加') {
        url = `/platform/shopDetail/saveAliMerchantApply`
      } else {
        url = `/platform/shopDetail/editAliMerchantApply`
      }
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data: this.$http.adornData(this.addAliInfoForm)
      }).then(({ data }) => {
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        this.dialogAliVisible = false
        this.getShopAliInfo()
        this.saveCustomerInfoLoading = false
      }).catch(err => {
        this.saveCustomerInfoLoading = false
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.marginBottom{margin-bottom:20px}
.el-input{
  width: 200px;
}
.el-form-item__label{
  display: block;
  width: 100px!important;
}
.default-btn {
  margin-left: 30px;
}
.btnBox {
  display: flex;
  justify-content: flex-end;
}
</style>
